<template>
    <div class="background-cover">
      <div class="login_box">
        <el-image class="login_line"
          :src="require('../assets/images/bg-line.png')"
          fit="contain">
        </el-image>
        <div class="title">欢迎使用AI数字人管理平台</div>
        <div class="input_box">
          <div class="input_name">用户名：</div>
          <div class="input_content">
            <el-input v-model="uname" size="medium" style="height: 100%;"></el-input>
          </div>
        </div>
        <div class="input_box input_box2">
          <div class="input_name">密码：</div>
          <div class="input_content">
            <el-input type="password" v-model="upwd" size="medium" style="height: 100%;"></el-input>
          </div>
        </div>
        <div class="login_btn">
          <el-button type="primary" style="width: 100%;height:100%" size="medium" @click="toHome">登录</el-button>
        </div>
      </div>
    </div>
</template>
<script>
import { mapActions  } from 'vuex';
export default {
  name: "index",
  data() {
    return {
      uname:'',
      upwd:''
    };
  },
  created() {
  },
  methods: {
    ...mapActions(['login']),
    toHome(){
      var url="manager/login_ma";
      var params={
        tell: this.uname,
        pwd: this.upwd
      }
      this.$post(url, params).then((res) => {
        console.log(res)
        if (res.code === 200) {
          const user = { mName: res.data.mname,mId: res.data.mid};
          this.login(user);
          sessionStorage.setItem('mId', res.data.mid);
          sessionStorage.setItem('mName', res.data.mname);
          this.$message({
            message: '登录成功！',
            type: 'success'
          })
          this.$router.push('/');
        } else {
          this.$message.error(res.msg)
        }
      });
    }
  }
}
</script>
<style scoped lang="scss">
  .background-cover {
    width: 100%;
    height: 100vh; /* 你可以根据需要调整高度 */
    background-image: url('@/assets/images/login-bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .login_box{
    position: absolute;
    width: 40%;
    left: 30%;
    top: 28%;
  }
  .login_line{
    width: 100%;
    height: 100%;
  }
  .title{
    position: absolute;
    color: #fff;
    text-align: center;
    width: 100%;
    top: -12px;
    font-size: 24px;
    height: 32px;
    line-height: 32px;
  }
  .input_box{
    position: absolute;
    top: 85px;
    border: 1px #fff solid;
    width: 320px;
    text-align: left;
    left: 50%;
    margin-left: -160px;
  }
  .input_box2{
    top: 160px;
  }
  .input_name{
    color: #fff;
    display: inline-block;
    vertical-align: top;
    width: 80px;
    text-align: center;
    height: 50px;
    line-height: 50px;
  }
  .input_content{
    width: 240px;
    display: inline-block;
    vertical-align: top;
  }
  ::v-deep .el-input__inner{
    background-color: transparent;
    border: 0;
    color: #fff;
  }
  ::v-deep .el-input--medium .el-input__inner{
    height: 50px;
    line-height: 50px;
  }
  .login_btn{
    position: absolute;
    top: 245px;
    width: 320px;
    height: 50px;
    text-align: left;
    left: 50%;
    margin-left: -160px;
  }
</style>